<template>
    <div id="Allfoot">
		<div class="Banner-List">
			<div class="Banner-List-item" @click="switchTo('/Index')">
				<img :src="'/Index' === $route.path ? tabBarImgArr[0].selected : tabBarImgArr[0].normal">
				<p :class="{on: '/Index' === $route.path}">首页</p>
			</div>
			<div class="Banner-List-item" @click="switchTo('/Sort/Hot')">
				<img :src="'/Sort' === $route.path ? tabBarImgArr[1].selected : tabBarImgArr[1].normal">
				<p :class="{on: '/Sort' === $route.path}">分类</p>
			</div>
			<div class="Banner-List-item" @click="switchTo('/Find/Alls')">
				<img :src="'/Find' === $route.path ? tabBarImgArr[2].selected : tabBarImgArr[2].normal">
				<p :class="{on: '/Find' === $route.path}">发现</p>
			</div>
			<div class="Banner-List-item" @click="switchTo('/Shopcar')">
				<img :src="'/Shopcar' === $route.path ? tabBarImgArr[3].selected : tabBarImgArr[3].normal">
				<p :class="{on: '/Shopcar' === $route.path}">购物车</p>
			</div>
			<div class="Banner-List-item" @click="switchTo('/Myjd')">
				<img :src="'/Myjd' === $route.path ? tabBarImgArr[4].selected : tabBarImgArr[4].normal">
				<p :class="{on: '/Myjd' === $route.path}">我的</p>
			</div>
		</div>
		<div class="Banner-top">
			<a href="#"><img src="../assets/images/顶部.png"></a>
		</div>
	</div>
</template>

<script>
export default {
    name: 'Allfooter',

    data() {
        return {
            tabBarImgArr: [ //图片切换
					{
						normal: require('../assets/images/204首页.png'),
						selected: require('../assets/images/204首页1.png')
					},
					{
						normal: require('../assets/images/分类.png'),
						selected: require('../assets/images/分类1.png')
					},
					{
						normal: require('../assets/images/发现.png'),
						selected: require('../assets/images/发现1.png')
					},
					{
						normal: require('../assets/images/购物车.png'),
						selected: require('../assets/images/购物车1.png')
					},
					{
						normal: require('../assets/images/我的.png'),
						selected: require('../assets/images/我的1.png')
					}
				],
        };
    },

    mounted() {
        
    },

    methods: {
        switchTo(path) {
				// console.log(this.$router)
				this.$router.replace(path)
			}
    },
};
</script>

<style scoped>
#Allfoot{
	padding-top: 48px;
}
#Allfoot p{
    margin-top: 0px;
}
.Banner-List{
	width: 400px;
	height: 48px;
	position: fixed;
	bottom: 0px;
	background-color: white;
	font-size: 0.8em;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	border-top: 1px solid dimgray;
}
.Banner-List img{
	width: 24px;
	height: 24px;
	margin-top: 3px;
    
}

.Banner-List-item{
	color: gray;
	width: 30px;
	height: 48px;
	text-align: center;
	cursor: pointer;
}


.on{
	color: red;
}

.Banner-top{
	width: 30px;
	height: 30px;
	border: 1px solid dimgray;
	background-color: white;	
	border-radius: 50%;
	position: fixed;
	bottom: 95px;
	right: 20px;
}
.Banner-top img{
	width: 24px;
	height: 24px;
	margin-top: 3px;
    margin-left: 3px;
}


</style>